<template>
  <div class="invite">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="邀请好友"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="header" style="background-color: #00b386;" v-if="this.show===1">
      <div class="coin-header">
        <span>请先登录</span>
        <van-button type="info" round plain @click="toLogin()">登 录</van-button>
      </div>
    </div>

    <div v-if="this.show===2">
      <!-- 邀请奖励卡片 -->
      <div class="reward-card">
        <div class="reward-title">邀请好友获得汪汪粮</div>
        <div class="reward-amount"><b>最高</b>88,000</div>
        <div class="invite-code">
          我的邀请码：{{this.user.invitation}}
          <van-tag type="primary" size="small" color="#00b386" @click="copyCode">复制</van-tag>
        </div>
        <van-button
            type="primary"
            block
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            class="invite-button"
            @click="shareInvite"
        >
          点击邀请
        </van-button>
      </div>

      <!-- 奖励说明 -->
      <div class="reward-rules">
        <div class="rules-title">我如何获得奖励?</div>
        <div class="rules-content">
          完成以下邀请任务即可获得海量汪汪粮奖励！
          <div class="reward-steps">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="coin-icon">
                <van-icon name="gold-coin-o" color="#ff6034" size="24"/>
              </div>
              <div class="step-amount">12,000</div>
              <div class="step-desc">邀请1位朋友</div>
            </div>
            <div class="step-item">
              <div class="step-number">2</div>
              <div class="coin-icon">
                <van-icon name="gold-coin-o" color="#ff6034" size="24"/>
              </div>
              <div class="step-amount">21,000</div>
              <div class="step-desc">邀请3位朋友</div>
            </div>
            <div class="step-item">
              <div class="step-number">3</div>
              <div class="coin-icon">
                <van-icon name="gold-coin-o" color="#ff6034" size="24"/>
              </div>
              <div class="step-amount">55,000</div>
              <div class="step-desc">邀请5位朋友</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 邀请步骤 -->
      <div class="invite-steps">
        <div class="steps-title">邀请步骤</div>
        <div class="steps-content">
          <div class="step-text">填写邀请码，邀请朋友</div>
          <van-steps direction="vertical" :active="0">
            <van-step>
              <template #title>
                <span class="step-main">点击立即邀请按钮</span>
              </template>
              <template #default>
                点击立即邀请按钮
              </template>
            </van-step>
            <van-step>
              <template #title>
                <span class="step-main">朋友通过链接下载APP</span>
              </template>
              <template #default>
                填写邀请码，邀请朋友
              </template>
            </van-step>
            <van-step>
              <template #title>
                <span class="step-main">朋友注册并输入邀请码</span>
              </template>
              <template #default>
                邀请朋友越多，汪汪粮越多
              </template>
            </van-step>
          </van-steps>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTabbar" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="records" to="/task">任务</van-tabbar-item>
      <van-tabbar-item icon="bookmark-o" to="/bookshelf">书架</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'ChatView',
  data() {
    return {
      activeTabbar: 2,
      one:{},
      user:{},
      show:'',
    }
  },
  methods: {
    toLogin(){
      this.$router.push("/login")
    },
    findOneUser(){
      axios.post("http://localhost:9999/api-user/user/findOneUser?id="+this.one.id).then(res=>{
        this.user = res.data;
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    copyCode() {
      // 复制邀请码
      navigator.clipboard.writeText('12345645')
      this.$toast('邀请码已复制')
    },
    shareInvite() {
      // 分享邀请链接
     this.$router.push("/mine")
    }
  },
  created(){
    this.one = JSON.parse(localStorage.getItem("user"));
    if (this.one == null){
      this.show =1;
    }else{
      this.show =2;
      this.findOneUser();
    }
  }
}
</script>

<style scoped>
.invite {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.reward-card {
  background: #00b386;
  color: white;
  padding: 24px 16px;
  text-align: center;
}

.reward-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.reward-amount {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 16px;
}

.invite-code {
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.invite-button {
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
}

.reward-rules {
  margin: 16px;
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.rules-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.rules-content {
  color: #666;
  font-size: 14px;
}

.reward-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.step-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.step-number {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6034;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 16px;
}

.coin-icon {
  margin-bottom: 4px;
}

.step-amount {
  color: #ff6034;
  font-weight: bold;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.invite-steps {
  margin: 16px;
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.steps-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}

.step-text {
  color: #666;
  font-size: 14px;
  margin-bottom: 16px;
}

.step-main {
  color: #333;
  font-weight: bold;
}

:deep(.van-step__title) {
  margin-bottom: 4px;
}

:deep(.van-step__circle) {
  background-color: #00b386;
  border-color: #00b386;
}

:deep(.van-step__line) {
  background-color: #00b386;
}

:deep(.van-step__content) {
  color: #666;
  font-size: 14px;
}
</style>
